<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<view class="list" @click="gouser(item)">
					<view class="user tn-flex tn-flex-col-center">
						<view class="user-img">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="user-right">
							<view class="name">{{item.nickname}}</view>
						</view>
						<!-- close-color -->
						<view class="btn" v-if="type == 'fans' && item.is_fans == 0" @click="followUser(item.id,index)">关注</view>
						<view class="btn close-color" v-if="type == 'fans' && item.is_fans == 1" @click="followUser(item.id,index)">已关注</view>
					</view>
				</view>
			</block>
			<tn-load-more style="margin: 15px;" :status="loadingStatus"></tn-load-more>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id: '',
				type: '',
				page: 1,
				list: [],
				show:false,
				loadingStatus:'nomore'
			};
		},
		onLoad(option) {
			if (option.user_id) {
				this.user_id = option.user_id
			}
			if (option.type) {
				this.type = option.type

			}
			this.getList()
		},
		onReachBottom() {
			this.page++
			this.loadingStatus = 'loading'
			this.getList()
		},
		methods: {
			async getList() {
				let url = ''
				if (this.type == 'fans') {
					url = '/api/index/fansList'
					uni.setNavigationBarTitle({
						title: '粉丝列表'
					})
				}
				if (this.type == 'follow') {
					url = '/api/index/followList'
					uni.setNavigationBarTitle({
						title: '关注列表'
					})
				}
				try {
					let result = await this.$request({
						loading: 1,
						method: 'get',
						url,
						data: {
							user_id: this.user_id,
							page: this.page
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.list = data
						this.show = true
					}else{
						this.list = this.list.concat(data)
						this.loadingStatus = 'nomore'
						if(data.length == 0){
							this.page--
						}
					}
				} catch (e) {
					this.msg(e.data.msg)
				}


			},
			async followUser(user_id,index) {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'get',
						url: '/api/user/followUser',
						data: {
							user_id
						}
					})
					this.list[index].is_fans = this.list[index].is_fans == 1 ? 0 : 1

				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			gouser(item){
				console.log(item)
				uni.navigateTo({
					url:"/circlePages/blogger_other_user?id="+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		//padding: 30rpx;
    background: #efefef;
    height: calc(100vh - 44px);
		.list {
      border-top: 1px solid #efefef;
      padding: 15px;
      background: #ffffff;
			.user {
				.user-img {
					width: 68rpx;
					height: 68rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-right {
					padding-left: 16rpx;
					flex: 1;

					.name {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}

					.tishi {
						margin-top: 8rpx;
					}

				}

				.btn {
					width: 120rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 42rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
				}

				.close-color {
					background: #CCCCCC;
				}
			}


		}
	}
</style>
